<template>
	<a-modal v-bind="options" class="bill-flow-audit-dialog">
		<!-- 基本信息 -->
		<a-skeleton :loading="loadings.detail" active>
			<a-descriptions title="基本信息" :column="2" class="ant-descriptions-blockquote">
				<a-descriptions-item label="房源地址">
					<a-tag v-if="detail.houseAlias" color="processing">{{ detail.houseAlias }}</a-tag>
					{{ detail.houseAddress }}
				</a-descriptions-item>
				<a-descriptions-item label="账单类型">{{ detail.billTypeName }}</a-descriptions-item>
				<a-descriptions-item label="账单备注" :span="2">{{ detail.billComment }}</a-descriptions-item>
				<a-descriptions-item label="账单凭证" :span="2">
					<file-upload :files="detail.billAttachment" only-show-preview />
				</a-descriptions-item>
			</a-descriptions>
		</a-skeleton>
		<a-typography-text strong>
			<blockquote>流水明细</blockquote>
		</a-typography-text>
		<vxe-grid ref="grid" v-bind="gridOptions" :data="detail.billDetailInfoList" :loading="loadings.detail">
			<template #money="{row}">
				<span v-text="row.feeDirection === 1 ? '+' : '-'" />
				{{ row.money }}
			</template>
			<template #bottom>
				<vxe-toolbar perfect>
					<template #buttons>费用总计：{{ (detail.totalMoney || 0).toLocaleString() }}</template>
				</vxe-toolbar>
			</template>
		</vxe-grid>
		<br />
		<a-skeleton :loading="loadings.detail" active>
			<!-- 支付信息 -->
			<a-descriptions title="支付信息" :column="{xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 1}" class="ant-descriptions-blockquote">
				<a-descriptions-item label="付款人">{{ detail.payerName }}</a-descriptions-item>
				<a-descriptions-item label="付款人手机号">{{ detail.payerPhone }}</a-descriptions-item>
				<a-descriptions-item label="付款人账号类型">{{ payTypeMap[detail.paymentAccountType] }}</a-descriptions-item>
				<a-descriptions-item label="账号">{{ detail.paymentAccount }}</a-descriptions-item>
				<a-descriptions-item label="支付方式">{{ detail.paymentMethodName }}</a-descriptions-item>
				<a-descriptions-item label="支付时间">{{ detail.practicalTime }}</a-descriptions-item>
				<a-descriptions-item label="经办人">{{ detail.affirmEmpName }}</a-descriptions-item>
				<a-descriptions-item label="支付备注" :span="2">{{ detail.comment }}</a-descriptions-item>
				<a-descriptions-item label="账单凭证" :span="3"></a-descriptions-item>
			</a-descriptions>
		</a-skeleton>
		<!-- 审核信息 -->
		<a-typography-text strong>
			<blockquote>审核信息</blockquote>
		</a-typography-text>
		<a-form :model="entity" ref="formRef">
			<a-form-item label="审核意见" name="auditComment" :rules="[{required: true, message: '审核意见不能为空'}]">
				<a-textarea v-model:value="entity.auditComment" placeholder="请输入审核意见" show-count :maxlength="200" />
			</a-form-item>
		</a-form>
		<template #footer>
			<!-- 云丁需求 线上支付不可以驳回 -->
			<a-button v-if="!detail.isOnline" type="primary" danger :loading="loadings.audit" @click="submit(2)">驳回</a-button>
			<a-button type="primary" :loading="loadings.audit" @click="submit(1)">通过</a-button>
		</template>
	</a-modal>
</template>
<script lang="ts" setup>
	import {reactive, ref, toRef, watchEffect} from 'vue'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {FormInstance, message} from 'ant-design-vue'
	import {formatDate} from 'yuxin-base/src/utils/date'
	import {BillFLow, payTypeMap} from '@/interface/bill'
	import {financeBillFlowAudit, getFinanceBillFlowDetail} from '@/api/details'

	const props = defineProps<{
		// 流水id
		id?: string
		visible: boolean
	}>()

	const loadings = reactive({
		audit: false,
		detail: false
	})

	const detail = ref<BillFLow>({
		totalMoney: 0
	})
	const formRef = ref<FormInstance>()
	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '流水审核',
		width: 1200,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('close')
			emits('update:visible', false)
			detail.value = {totalMoney: 0}
			formRef.value?.resetFields()
		}
	})

	const entity = reactive<any>({
		bizId: null,
		result: null,
		auditComment: null
	})

	const grid = ref<VxeGridInstance>()
	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		maxHeight: 300,
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '费用科目',
				minWidth: 200,
				formatter({row}) {
					return row.feeSubjectName + '：' + (row.attributionType === 1 ? '企业承担' : '个人承担')
				}
			},
			{
				title: '金额',
				minWidth: 150,
				slots: {
					default: 'money'
				}
			},
			{
				title: '费用周期',
				minWidth: 350,
				formatter({row}) {
					return formatDate(row.beginTime) + ' 至 ' + formatDate(row.endTime)
				}
			}
		]
	})

	watchEffect(() => {
		if (props.visible && props.id) {
			loadings.detail = true
			getFinanceBillFlowDetail(props.id)
				.then(({data}) => (detail.value = data))
				.finally(() => (loadings.detail = false))
		}
	})

	// 通过&&驳回
	const submit = (result: number) => {
		formRef.value?.validate().then(() => {
			entity.bizId = props.id
			entity.result = result

			loadings.audit = true
			financeBillFlowAudit(entity)
				.then(() => {
					options.onCancel()
					message.success('审核完成')
				})
				.finally(() => (loadings.audit = false))
		})
	}
</script>
<style lang="less">
	.bill-flow-audit-dialog {
		.ant-modal-body {
			overflow: auto;
			min-height: 600px;
			max-height: 900px;
			height: calc(100vh - 150px);
		}
	}
</style>
